<template>
  <div>
    <!-- 三级分类 -->
     <el-card>
      <Category :scene="scene"></Category>
    </el-card>
    <!-- 内容部分 -->
     <el-card style="margin: 10px  0px;">
      <!-- 场景0 -->
      <div v-show="scene==0">
          <el-button type="primary" size="defaulte" icon="Plus" :disabled="!categoryStore.c3Id" @click="addSpu" v-has="`btn.Spu.add`">添加SPU</el-button>
          <el-table style="margin: 10px 0px;" :data="records">
            <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
            <el-table-column label="SPU名称" prop="spuName"></el-table-column>
            <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
            <el-table-column label="SPU操作">
              <!-- row为已有的SPU对象 -->
              <template #="{row,$index}">
                  <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSku" v-has="`btn.Spu.addsku`"></el-button>
                  <el-button type="primary" size="small" icon="Edit" title="修改SPU" @click="updateSpu(row)" v-has="`btn.Spu.update`"></el-button>
                  <el-button type="primary" size="small" icon="View" title="查看SKU列表" v-has="`btn.Spu.skus`"></el-button>
                  <el-button type="danger" size="small" icon="Delete" title="删除SPU" v-has="`btn.Spu.delete`"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[3,5,7,9]"
            :background="true"
            layout="prev, pager, next, jumper,->,total,sizes"
            :total="total"
            @current-change="getHasSpu"
            @size-change="changeSize"
          />
      </div>
      <!-- 场景1  添加spu--修改spu -->
       <SpuForm ref="spu" v-show="scene==1" @ChangeScene="ChangeScene"></SpuForm>
       <!-- 场景2 添加sku-->
        <SkuForm ref="sku" v-show="scene==2" @ChangeScene="ChangeScene"></SkuForm>
     </el-card>
  </div>
</template>

<script setup lang='ts'>
import {ref,watch,onMounted} from 'vue'

//引入小仓库
import useCategoryStore from '@/store/modules/category'
import { reqHasSpu } from '@/api/product/spu';
import type { HasSpuResponseData,Records,SpuData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';
//引入场景1,2组件
import SpuForm from './spuForm.vue';
import SkuForm from './skuForm.vue';
let categoryStore=useCategoryStore()
//定义card组件内容切换
let scene=ref<number>(0) //当scene=0时，显示table，是=1时：显示添加属性页面
// 内容部分代码
let pageNo=ref<number>(1)
// 每一页展示几条数据
let pageSize=ref<number>(3)
//保存数据的数组
let records=ref<Records>([])
//存储已有SPU总个数
let total=ref<number>(0)
//获取子组件实例
let spu=ref<any>()
//获取子组件实例SkuForm
let sku = ref<any>();
//监听第三级分类id
watch(()=>categoryStore.c3Id,()=>{
  if(!categoryStore.c3Id) return;
  getHasSpu()
})
//获取三级分类下的SPU数据
const getHasSpu=async(pager=1)=>{
  //修改当前页码
  pageNo.value=pager
  let result:HasSpuResponseData=await reqHasSpu(pageNo.value,pageSize.value,categoryStore.c3Id)
  if(result.code==200){
      //存储数组
      records.value=result.data.records
      total.value=result.data.total
  }
}
//分页器下拉菜单发生变化时
const changeSize=()=>{
  getHasSpu()
}
//添加新的spu按钮回调
const addSpu=()=>{
  //切换到场景1
  scene.value=1
  //调用子组件方法初始化数组
  spu.value.initAddSpu(categoryStore.c3Id)
}
//自定义事件：通知父组件切换为场景0
const ChangeScene = (obj: any) => {
    //子组件Spuform点击取消变为场景0:展示已有的SPU
    scene.value = obj.flag;
    if (obj.params == 'update') {
        //更新留在当前页
        getHasSpu(pageNo.value);
    } else {
        //添加留在第一页
        getHasSpu();
    }
}
//修改spu按钮回调-->切换为场景1
const updateSpu=(row:SpuData)=>{
    //切换到场景1
    scene.value=1
    spu.value.initHasSpuData(row)
}
//添加sku
const addSku=()=>{
  scene.value=2
}

</script>



<style scoped lang='scss'>

</style>